<template>
	<div style="width: 100%;height: 100%;position: relative;">
		<div style="width: 100%;height:20vh;">
				   <div class="inner">
					   <el-input
				    v-model="data.input"
				    style="width: 200px"
				    placeholder="请输入查询的商品名称"
				    clearable
				  />
				      <el-button @click="search(data.input)" :icon="Search" circle />
				    </div>
			
			<div class="boton"><button type="button" @click="go2add()">添加商品</button></div>
		</div>
		<div >
			<el-table :data="data.goods" style="width: 100%">
			    <el-table-column label="商品ID">
			      <template #default="scope">
			        <div style="display: flex; align-items: center">
			          <span style="margin-left: 10px">{{ scope.row.bookid }}</span>
			        </div>
			      </template>
			    </el-table-column>
				<el-table-column label="商品名称">
				  <template #default="scope">
				    <div style="display: flex; align-items: center">
				      <span style="margin-left: 10px">{{ scope.row.bookname }}</span>
				    </div>
				  </template>
				</el-table-column>
				<el-table-column label="商品图片">
				  <template #default="scope">
					<div style="width: 10vw;height: 10vw">
						 <img v-bind:src="'/api/public/findgoodsimg/'+scope.row.gid" style="height: 98%; width: 100%;" >
					</div>
				  </template>
				</el-table-column>
				<el-table-column label="商品上架日期">
				  <template #default="scope">
				    <div style="display: flex; align-items: center">
				      <span style="margin-left: 10px">{{mydate(scope.row.gdate)  }}</span>
				    </div>
				  </template>
				</el-table-column>
				<el-table-column label="会员价格">
				  <template #default="scope">
				    <div style="display: flex; align-items: center">
				      <span style="margin-left: 10px">{{ scope.row.vip }}</span>
				    </div>
				  </template>
				</el-table-column>
				<el-table-column label="商品原价">
				  <template #default="scope">
				    <div style="display: flex; align-items: center">
				      <span style="margin-left: 10px">{{ scope.row.price }}</span>
				    </div>
				  </template>
				</el-table-column>
			    <el-table-column label="操作">
			      <template #default="scope">
			        <el-button size="small" @click="go2Update(scope.row.bookid)">
			          修改
			        </el-button>
			        <el-button
			          size="small"
			          type="danger"
			          @click="del(scope.row.bookid)">
			          删除
			        </el-button>
			      </template>
			    </el-table-column>
			  </el-table>
		</div>
		<div style=" display: flex; justify-content: center;">
			<el-pagination
			    background
			    layout="prev, pager, next"
			    :total="data.page"
			    :current-page="data.paging.pagenum"
			    @current-change="handleCurrentChange"
			  />
		</div>
	</div>
	
</template>

<script long="ts" setup>
	import {ref,reactive,onMounted} from "vue"
	import {$get,$postx,$postf} from "../../../ajax/index.js"
	import myalert from  "../../../utils/myalert.js"
	import { useRoute,useRouter } from 'vue-router'
	import {
	  Check,
	  Delete,
	  Edit,
	  Message,
	  Search,
	  Star,
	} from '@element-plus/icons-vue'
	const data=reactive({
		goods:[],
		input:'',
		paging: { pagenum:0, lines: 5 },//分页
		page: 0,
	})
	onMounted(()=>{
		$postx("/api/adm/goods/findPage",data.paging)
		 .then((resp) => {
		    console.log(resp.data.data)
		    data.goods = resp.data.data;
		  })
		 $get("/api/adm/goods/page")
		   .then((resp) => {
		     console.log(resp.data.data)
		     data.page = resp.data.data*10
		   })
		 
	})
	const router = useRouter()
	function go2add(){
		router.push({
			path:"/adm/addgoods",
		})
	}
	// 查询商品名称
	function search(bookname){
		console.log(bookname)
		$get("/api/adm/goods/findonebookname/"+bookname)
		.then((resp)=>{
			console.log(resp.data.data)
			data.goods=resp.data.data;
			if(resp.data.data!=null){
			ElMessage({
			message: "查询成功!!!",
			type: 'success',
		})	
			}
		
		})
	}
	/* 日期格式化 */
	function mydate(d){
		d=new Date(d);
		console.log(d)
		console.log( typeof d)
		let yy= d.getFullYear();
		let mm= d.getMonth()+1;
		let dd=d.getDate();
		let b=yy+"年"+mm+"月"+dd+"日";
		return b;
	}
	
	
	// 修改
	function go2Update(bookid){
		router.push({
			path:"/adm/addgoods",
			query:{
				id:bookid,
			}
		})
	}
	// // 删除
	function del(bookid){
		console.log(bookid)
		$get("/api/adm/goods/del/"+bookid)
		.then((resp)=>{
			data.goods=resp.data.data;
		})
	}
	// 分页
	function handleCurrentChange(page) {
	  data.paging.pagenum = page;
	  console.log('当前页码:', page);
	  console.log(data.paging)
	  data.paging.lines=5*page;
	  data.paging.pagenum=data.paging.pagenum+page*5;
	  console.log(data.paging)
	  // 这里可以添加根据页码重新请求数据的逻辑
	  $postx("/api/adm/goods/findPage",data.paging)
	   .then((resp) => {
	      console.log(resp.data.data)
	      data.goods = resp.data.data;
	    });
	
		
	}
	
	
</script>

<style>
	
	/* 搜索框的定位 */
	.inner{
		width: 300px;
		position: absolute;
		top: 4%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	/* 添加商品按钮的定位 */
	.boton{
		width: 300px;
		position: absolute;
		top: 5%;
		left: 100%;
		transform: translate(-50%, -70%);
	}
</style>
